<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>个人注册</title>
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../css/all.css"/>
    <link rel="stylesheet" type="text/css" href="../css/pages-register.css"/>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        .error {
            margin-left: 20px;
            padding-top: 10px;
            color: red;
            font-size: 14px;
            line-height: 30px;
            /*background-color: #1afbd6;*/
        }
        .registerGroup{
            margin-left: 99px;
            float: left;
            /*background-color: #1aa5fb;*/
        }
        .registerBtn {
            width: 100px;
            height: 30px;
            font-size: 20px;
            margin-left: 20px;
            background-color: rgba(225,37,27,0.9);
            border-color: rgba(225,37,27,0.9);
        }

    </style>
</head>

<body>
<!--页面顶部-->
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">汇才商城欢迎您！</li>
                        <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a href="register.html"
                                                                                                 target="_blank">免费注册</a></span></li>
                    </ul>
                    <div class="fr typelist">
                        <ul class="types">
                            <li class="f-item">
                                <span>
                                    <a href="myOrder.html" target="_blank">我的订单</a>
                                </span>
                            </li>

                            <li class="f-item"><span><a href="cart.html" target="_blank">我的购物车</a></span></li>
                            <li class="f-item"><span><a href="home.html" target="_blank">我的汇才</a></span></li>
                            <li class="f-item"><span>汇才会员</span></li>
                            <li class="f-item"><span>企业采购</span></li>
                            <li class="f-item"><span>关注汇才</span></li>
                            <li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
                            <li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <a class="logo-bd" title="汇才商城" href="index.html" target="_blank"></a>
                    </div>
                    <div class="yui3-u Rit searchArea">
                        <div class="search">
                            <form action="" class="sui-form form-inline">
                                <!--searchAutoComplete-->
                                <div class="input-append">
                                    <input type="text" id="autocomplete" class="input-error input-xxlarge"/>
                                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<div class="register py-container ">
    <!--register-->
    <div class="registerArea">
        <h3>注册新用户<span class="go">我有账号，去<a href="login.html" target="_blank">登陆</a></span></h3>
        <div class="info">
            <form class="sui-form form-horizontal" id="registerForm">
                <div class="control-group">
                    <label class="control-label">用户昵称：</label>
                    <div class="controls">
                        <input type="text" name="userName" id="userName" placeholder="请输入你的用户昵称" class="input-xfat input-xlarge">
                    </div>
                    <label class="error" id="userNameMessage"><!--✘该用户名已存在--></label>
                </div>
                <div class="control-group">
                    <label class="control-label">登录密码：</label>
                    <div class="controls">
                        <input type="password" name="userPassword" id="userPassword" placeholder="设置登录密码" class="input-xfat input-xlarge">
                    </div>
                    <label class="error" id="userPasswordMessage"><!--✘请输入密码--></label>
                </div>
                <div class="control-group">
                    <label class="control-label">确认密码：</label>
                    <div class="controls">
                        <input type="password" id="checkPwd" placeholder="再次确认密码" class="input-xfat input-xlarge">
                    </div>
                    <label class="error" id="checkPwdMessage"><!--✘确认密码与密码不一致--></label>
                </div>
                <div class="control-group">
                    <label class="control-label">邮箱：</label>
                    <div class="controls">
                        <input type="text" name="userEmail" id="userEmail" placeholder="请输入你的邮箱" class="input-xfat input-xlarge">
                    </div>
                    <label class="error" id="userEmailMessage"><!--✘请输入邮箱--></label>
                </div>
                <div class="control-group">
                    <label class="control-label">验证码：</label>
                    <div class="controls">
                        <input type="text" name="identityCode" id="identityCode" placeholder="验证码" class="input-xfat input-xlarge"
                               style="width: 170px">
                        <input type="button" style="height: 38px;" value="获取验证码" onclick="getIdentityCode()">
                    </div>
                    <label class="error" id="identityCodeMessage"></label>
                </div>
                <div class="control-group">
                    <label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="controls">
                        <input name="m1" id="m1" type="checkbox" value="1" checked="true">
                        <label class="" for="m1" style="user-select: none">同意协议并注册《汇才商城用户协议》</label>
                    </div>
                    <label class="error" id="m1Message"><!--✘请勾选用户协议--></label>
                </div>
            </form>
            <div class="registerGroup">
               <!-- <div class="controls btn-reg registerGroup">
                    <a class="sui-btn btn-block btn-xlarge btn-danger" onclick="register()" href="javascript:;" target="">完成注册</a>
                </div>-->
                <input type="button" class="registerBtn" onclick="clearForm()" value="重置">
                <input type="button" class="registerBtn" onclick="register()" value="注册">
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机汇才</li>
            <li>销售联盟</li>
            <li>汇才社区</li>
        </ul>
        <div class="address">© 2020 版权所有 广州汇才创智科技有限公司</div>
        <div class="beian">粤ICP备20043971号
        </div>
    </div>
</div>
<script>
    let $userName=$("#userName").val();
    let $userPassword=$("#userPassword").val();
    let $code=$("#code").val();
    let $userEmail=$("#userEmail").val();
    let $checkPwd=$("#checkPwd").val();
    let $identityCode=$("#identityCode").val();
    let $m1=$("#m1").val();
    let timer;  /*定制器*/

    /*鼠标失去焦点事件 判断用户信息是否输入*/
    $("#userName").blur(function () {
        $userName=$("#userName").val();
        if($userName=="" || $userName==null){
            $("#userNameMessage").html("✘请输入用户名");
            $("#userName").focus();
        }else {
            $("#userNameMessage").html("");
        }
    });

    $("#userPassword").blur(function () {
        $userPassword=$("#userPassword").val();
        if($userPassword=="" || $userPassword==null){
            $("#userPasswordMessage").html("✘请输入密码");
            $("#userPassword").focus();
        }else {
            $("#userPasswordMessage").html("");
        }
    });

    $("#checkPwd").keyup(function () {
        $checkPwd=$("#checkPwd").val();
        if($checkPwd=="" || $checkPwd==null){
            $("#checkPwdMessage").html("✘请输入确认密码");
            $("#checkPwd").focus();
        }else {
            if($checkPwd!=$userPassword){
                $("#checkPwdMessage").html("✘密码与确认密码不一致");
                $("#checkPwd").focus();
            }else {
                $("#checkPwdMessage").html("");
            }
        }
    })
    $("#checkPwd").blur(function () {
        $checkPwd=$("#checkPwd").val();
        if($checkPwd=="" || $checkPwd==null){
            $("#checkPwdMessage").html("✘请输入确认密码");
            $("#checkPwd").focus();
        }else {
            if($checkPwd!=$userPassword){
                $("#checkPwdMessage").html("✘密码与确认密码不一致");
                $("#checkPwd").focus();
            }else {
                $("#checkPwdMessage").html("");
            }
        }
    })

    $("#userEmail").blur(function () {
        $userEmail=$("#userEmail").val();
        if($userEmail=="" || $userEmail==null){
            $("#userEmailMessage").html("✘请输入邮箱");
            $("#userEmail").focus();
        }else {
            $("#userEmailMessage").html("");
        }
    });

    $("#identityCode").blur(function () {
        $identityCode=$("#identityCode").val();
        if($identityCode=="" || $identityCode==null){
            $("#identityCodeMessage").html("✘请输入验证码");
            $("#identityCode").focus();
        }else {
            $("#identityCodeMessage").html("");
        }
    });
    function showMessage() {
        let flag=false;
        $userName=$("#userName").val();
        $userPassword=$("#userPassword").val();
        $code=$("#code").val();
        $userEmail=$("#userEmail").val();
        $checkPwd=$("#checkPwd").val();
        $identityCode=$("#identityCode").val();
        $m1=$("#m1").val();

        if($userName=="" || $userName==null){
            $("#userNameMessage").html("✘请输入用户名");
            flag=false;
        }else {
            $("#userNameMessage").html("");
            flag=true;
        }
        if($userPassword=="" || $userPassword==null){
            $("#userPasswordMessage").html("✘请输入密码");
            flag=false;
        }else {
            $("#userPasswordMessage").html("");
            flag=true;
        }
        if($checkPwd=="" || $checkPwd==null){
            $("#checkPwdMessage").html("✘请输入确认密码");
            flag=false;
        }else {
            if($checkPwd!=$userPassword){
                $("#checkPwdMessage").html("✘密码与确认密码不一致");
                flag=false;
            }else {
                $("#checkPwdMessage").html("");
                flag=true;
            }
        }
        if($userEmail=="" || $userEmail==null){
            $("#userEmailMessage").html("✘请输入邮箱");
            flag=false;
        }else {
            $("#userEmailMessage").html("");
            flag=true;
        }
        if(!$("#m1").is(":checked")){
            $("#m1Message").html("✘请勾选用户协议");
            flag=false;
        }else {
            $("#m1Message").html("");
            flag=true;
        }
        if($identityCode=="" || $identityCode==null){
            $("#identityCodeMessage").html("✘请输入验证码");
            flag=false;
        }else {
            $("#identityCodeMessage").html("");
            flag=true;
        }
        return flag;
    }

    /*重置按钮*/
    function clearForm() {
        document.getElementById("registerForm").reset();
    }
    /*用户注册*/
    function register() {
        console.log(showMessage());
        if(showMessage()){
            let userData = {
                "userName": $("#userName").val(), "userPassword": $("#userPassword").val(),
                "code": $("#identityCode").val(), "userEmail": $("#userEmail").val(),
            };
            $.ajax({
                url: "/SpringBoot/user/register",
                type: "post",
                dataType: "json",
                data: userData,
                success: function (data) {
                    console.log(data);
                    if (data.code == 1) {
                        /*用户注册成功*/
                        window.open("login.html","_self");
                    } else if (data.code == 0) {
                        /*用户名已存在*/
                        $("#userNameMessage").html(data.message);
                    }else if (data.code == 3){
                        /*验证码导致的错误*/
                        $("#identityCodeMessage").html(data.message);
                        clearInterval(timer);
                    }else{
                        /*其他原因导致错误*/
                        alert("注册失败请稍后重试!")
                    }
                },
                error: function () {
                    $("#message").html("数据获取失败");
                }
            })
        }
    }

    /*获取验证码*/
    function getIdentityCode() {
        $userName=$("#userName").val();
        $userPassword=$("#userPassword").val();
        $code=$("#code").val();
        $userEmail=$("#userEmail").val();
        $checkPwd=$("#checkPwd").val();
        $identityCode=$("#identityCode").val();
        $m1=$("#m1").val();

        if($userName=="" || $userName==null){
            $("#userNameMessage").html("✘请输入用户名");
        }else {
            $("#userNameMessage").html("");
        }
        if($userPassword=="" || $userPassword==null){
            $("#userPasswordMessage").html("✘请输入密码");
        }else {
            $("#userPasswordMessage").html("");
        }
        if($checkPwd=="" || $checkPwd==null){
            $("#checkPwdMessage").html("✘请输入确认密码");
        }else {
            if($checkPwd!=$userPassword){
                $("#checkPwdMessage").html("✘密码与确认密码不一致");
            }else {
                $("#checkPwdMessage").html("");
            }
        }
        if($userEmail=="" || $userEmail==null){
            $("#userEmailMessage").html("✘请输入邮箱");
        }else {
            $("#userEmailMessage").html("");
        }
        $.ajax({
            url: "/SpringBoot/user/getIdentityCode",
            type: "post",
            dataType: "json",
            data: {"userEmail": $("#userEmail").val()},
            success: function (data) {
                console.log(data);
                if(data.success){
                    let time=60;
                    timer=setInterval(function () {
                        --time;
                        // $("#codeMess1").css({"display": "block"}).html("验证码已发送"+time+"s内有效");
                        $("#identityCodeMessage").html('验证码已发送<span style="color: green">'+time+'</span>s内有效');
                        if(time==0){
                            clearInterval(timer);
                        }
                    },1000)
                }
            },
            error: function () {
                $("#message").html("数据获取失败");
            }
        })
    }
</script>
</body>

</html>
